import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile";
import myaxios from "../../utils/myaxios";
import {withRouter} from "react-router-dom"
import "./searchcenter.scss"
 class searchcenter extends Component {
  state = {
    inputVal: "",
    ProductList: [],
  };
  //列表事件委托给父元素(点击列表项，跳转详情页)
  handleListClick =(e) => {
      console.log(e.target);
    //   获取点击的good_id值
    let good_id=e.target.getAttribute("data-goods_id")
    this.props.history.push("/goodDetail/"+good_id)
  }

  getProductList = (params) => {
    myaxios
      .get("/goods/qsearch", {
        params: {
          query: this.state.inputVal,
        },
      })
      .then((res) => {
        console.log(res);
        this.setState({
          ProductList: res,
        });
      });
  };

  render() {
    return (
      <div className="yg-searchCenter">
        <NavBar
          className="yg-searchCenter-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          搜索中心
        </NavBar>
        {/* 搜索输入框开始 */}
        <SearchBar
          className="yg-searchCenter-search"
          value={this.state.inputVal}
          placeholder="Search"
          //   onSubmit={(value) => console.log(value, "onSubmit")}
          //   onClear={(value) => console.log(value, "onClear")}
          //   onFocus={() => console.log("onFocus")}
          //   onBlur={() => console.log("onBlur")}
          onCancel={() => this.getProductList()}
          showCancelButton
          cancelText="搜索"
          onChange={(value) => {
            console.log(value);
            this.setState({
              inputVal: value,
            });
          }}
        />
        {/* 搜索输入框结束 */}
        {/* 产品列表开始 */}
        <div className="yg-searchCenter-list" onClick={this.handleListClick}>
          {(this.state.ProductList || []).map((v, i) => {
            return (
              <div
                className="searchCenter-list-item"
                key={v.goods_id}
                data-goods_id={v.goods_id}
              >
                {v.goods_name}
              </div>
            );
          })}
        </div>
        {/* 产品列表结束 */}
      </div>
    );
  }
}
export default withRouter(searchcenter)
